let nameObj,jobObj,salaryObj,dateObj;
let txtObj;
window.onload = function () {
    nameObj = document.getElementById("name");
    jobObj = document.getElementById("job");
    salaryObj = document.getElementById("salary");
    dateObj = document.getElementById("data");

    txtObj = null;
    let trArray = document.getElementsByTagName("tr");
    for (let i = 0; i < trArray.length; i++) {
        trArray[i].onclick = function () {
            trClick(this);
        }
    }
}

//点击行变色
function trClick(trObj) {
    if(txtObj != null){
        txtObj.style.backgroundColor = "white";
    }
    trObj.style.backgroundColor = "red";
    txtObj = trObj;

    var tdArray = txtObj.getElementsByTagName("td");
    nameObj.value = tdArray[0].innerHTML;
    jobObj.value = tdArray[1].innerHTML;
    salaryObj.value = tdArray[2].innerHTML;
}


function add() {
    //创建tr标签对象
    var trObj = document.createElement("tr");
    trObj.innerHTML = `<td>${nameObj.value}</td><td>${jobObj.value}</td><td>${salaryObj.value}</td>`;
    trObj.onclick = function(){
        trClick(this);
    }
    //在父节点中追加子节点
    dateObj.appendChild(trObj);
}

function del() {
    if(txtObj == null){
        return;
    }
    dateObj.removeChild(txtObj);
    txtObj = null;
}

function delAll() {
    // dateObj.innerHTML = "";
    var trArray = dateObj.getElementsByTagName("tr");
    for(var i = 0; i < trArray.length;){
        dateObj.removeChild(trArray[i]);
    }
}

function update() {
    var tdArray = txtObj.getElementsByTagName("td");
    tdArray[0].innerHTML = nameObj.value;
    tdArray[1].innerHTML = jobObj.value;
    tdArray[2].innerHTML = salaryObj.value;
}